<template>
  <div>


    <sky-panel title="普通表格">
      <template #main>
        <sky-table
          ref="table"
          :data="data"
          @get-current="getCurrent"
          v-slot="row" 
        >
            <sky-column :row="row.scope" prop="name" label="姓名" />
            <sky-column :row="row.scope" prop="age" label="年龄" />
            <sky-column :row="row.scope" prop="home" label="家庭住址" />
        </sky-table>
      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

        &lt;sky-table
          ref="table"
          :data="data"
          @get-current="getCurrent"
          v-slot="row" 
        &gt;
            &lt;sky-column :row="row.scope" prop="name" label="姓名" /&gt;
            &lt;sky-column :row="row.scope" prop="age" label="年龄" /&gt;
            &lt;sky-column :row="row.scope" prop="home" label="家庭住址" /&gt;
        &lt;/sky-table&gt;


          &lt;script lang="ts"&gt;

            import { defineComponent } from 'vue'

            export default defineComponent({
              setup() {
                const getCurrent = (row: any) => {
                  // console.log(row)
                }

                return {
                  getCurrent
                }
              },
              data() {
                return {
                  data: [
                    {
                      name: '王重阳',
                      age: 300,
                      home: '武当山',                    
                    },
                    {
                      name: '黄药师',
                      age: 38,
                      home: '桃花岛',                   
                    },
                    {
                      name: '欧阳锋',
                      age: 38,
                      home: '西域',
                    },
                    {
                      name: '洪七公',
                      age: 59,
                      home: '未知',
                    }
                  ]
                }
              }
            })

          &lt;/script&gt;

        </code>
    </pre>
    </div>
  </sky-code-panel>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const getCurrent = (row: any) => {
      // console.log(row)
    }

    return {
      getCurrent
    }
  },
  data() {
    return {
      data: [
        {
          name: '王重阳',
          age: 300,
          home: '武当山',
         
        },
        {
          name: '黄药师',
          age: 38,
          home: '桃花岛',
         
        },
        {
          name: '欧阳锋',
          age: 38,
          home: '西域',
         
        },
        {
          name: '洪七公',
          age: 59,
          home: '未知',
         
        }

      ]
    }
  }
})
</script>
